<template>
  <div class="vue_router_wrapper">

    本工程使用的是vue2.0，搭配vue
    router3.x，安装配置方法参考官方文档：https://v3.router.vuejs.org/zh/installation.html。
    本工程使用NPM安装引入vue router。具体操作：<br />
    （1） 使用npm命令安装vue-router npm install vue-router<br />
    （2）在模块化工程中，通过 Vue.use() 明确地安装路由功能：<br />
    新建了router文件夹，以及在其下新建index.js,
    通过下面的关键语句，安装路由功能：<br />

    import Vue from 'vue' import VueRouter from 'vue-router'
    Vue.use(VueRouter)<br />
    （3）标签：router-view与router-link<br />
    router-link 组件：通过传入
    `to`属性指定链接，router-link标签默认会被渲染成一个 a标签;<br />
    router-view:路由出口, 路由匹配到的组件将渲染在该标签处<br />
    因此：在app.vue处，新增一个router-view标签，实现路由匹配与渲染<br />

    （4）JS:注入路由<br />
    1)如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
    参见src\router\index.js <br />
    2） 定义 (路由)组件。<br />
    可以从其他文件 import 进来 本工程没有用这个方式，<br />
    参考语句：<br />
    `const Foo = { template: '
    <div>foo</div>
    ' }` <br />
    3) 定义路由: 每个路由应该映射一个组件。<br />
    其中"component" 可以是通过 Vue.extend() 创建的组件构造器，
    或者，只是一个组件配置对象。<br />
    参考语句：<br />
    const routes = [ { path: '/foo', component: Foo }, { path: '/bar',
    component: Bar } ] <br />
    参见：src\router\index.js <br />
    4) 创建 router 实例，然后传 `routes` 配置 <br />
    参考语句： <br />
    const router = new VueRouter({ routes // (缩写) 相当于 routes: routes <br />
    }) <br />
    参见：src\router\index.js <br />
    5）创建和挂载根实例。<br />
    通过 router 配置参数注入路由，从而让整个应用都有路由功能<br />
    参考语句：<br />
    const app = new Vue({ router }).$mount('#app') <br />
    参见：\src\main.js<br />
    通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过
    this.$route 访问当前路由<br />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    console.log(this.$route.meta);
  },
  methods: {},
};
</script>
<style>
.vue_router_wrapper {
  text-align: left;
}
</style>
